<!--
 * @FileDescription: 超级无敌table组件
 * @Author: XD
 * @Date: 10-15-2020
 * @LastEditors: 10-15-2020
 * @LastEditTime: 10-15-2020
 -->
<template>
  <el-dialog
    :title="this.title"
    :visible.sync="this.privateVisible"
    :before-close="handleClose"
    :append-to-body="true"
    :close-on-click-modal="false"
    width="50%"
    class="pub_dialog"
  >
    <el-scrollbar style="height: 80vh;overflow: scroll;">
      <el-form ref="ruleForm" label-width="150px" :model="ruleForm">
        <template v-for="(item, index) in this.config.table">
          <!--      单行输入框-->
          <el-form-item
            :key="index"
            v-if="!item.addEditType && !item.addEditHidden"
            :label="item.label"
          >
            <div class="formItemDiv">
              <span v-if="item.required">*</span>
              <XDInput
                :dataType="item.dataType"
                v-model="ruleForm[item.prop]"
                :disabled="item.disabled || disabled"
              ></XDInput>
            </div>
          </el-form-item>
          <!--     多行输入框-->
          <el-form-item
            :key="index"
            v-if="item.addEditType == 'textArea' && !item.addEditHidden"
            :label="item.label"
          >
            <div class="formItemDiv">
              <span v-if="item.required">*</span>
              <XDInput
                type="textarea"
                v-model="ruleForm[item.prop]"
                :disabled="item.disabled || disabled"
              ></XDInput>
            </div>
          </el-form-item>
          <!-- 单选radio-->
          <el-form-item
            :key="index"
            v-if="item.addEditType == 'radio'"
            :label="item.label"
          >
            <div class="formItemDiv">
              <span v-if="item.required">*</span>
              <XDRadio
                :list="item.list"
                v-model="ruleForm[item.prop]"
                :disabled="item.disabled || disabled"
              ></XDRadio>
            </div>
          </el-form-item>
          <!--    网络单选下拉选择框-->
          <el-form-item
            :key="index"
            v-if="item.addEditType == 'netDropDown'"
            :label="item.label"
          >
            <div class="formItemDiv">
              <span v-if="item.required">*</span>
              <XDSelecter
                :list="item.list"
                type="netDropDown"
                v-model="ruleForm[item.prop]"
                :link="item.link"
                :disabled="item.disabled || disabled"
              ></XDSelecter>
            </div>
          </el-form-item>
          <!--   网络多选下拉选择框-->
          <el-form-item
            :key="index"
            v-if="item.addEditType == 'multiNetDropDown'"
            :label="item.label"
          >
            <div class="formItemDiv">
              <span v-if="item.required">*</span>
              <XDSelecter
                :list="item.list"
                type="multiNetDropDown"
                v-model="ruleForm[item.prop]"
                :disabled="item.disabled || disabled"
              ></XDSelecter>
            </div>
          </el-form-item>
          <!--  单选下拉选择框-->
          <el-form-item
            :key="index"
            v-if="item.addEditType == 'dropDown' && !item.addEditHidden"
            :label="item.label"
          >
            <div class="formItemDiv">
              <span v-if="item.required">*</span>
              <XDSelecter
                :list="item.list"
                type="dropDown"
                :store="item.store"
                v-model="ruleForm[item.prop]"
                :link="item.link"
                :disabled="item.disabled || disabled"
              ></XDSelecter>
            </div>
          </el-form-item>
          <!--  树状lastNode选择器-->
          <el-form-item
            :key="index"
            v-if="item.addEditType == 'lastNodeTree'"
            :label="item.label"
          >
            <div class="formItemDiv">
              <span v-if="item.required">*</span>
              <XDTree
                :list="item.list"
                v-model="ruleForm[item.prop]"
                :disabled="item.disabled || disabled"
              ></XDTree>
            </div>
          </el-form-item>
          <!-- 下拉框 分类选择器-->
          <el-form-item
            :key="index"
            v-if="item.addEditType == 'cascader'"
            :label="item.label"
          >
            <div class="formItemDiv">
              <span v-if="item.required">*</span>
              <XDCascader
                :list="item.list"
                v-model="ruleForm[item.prop]"
                :disabled="item.disabled || disabled"
              ></XDCascader>
            </div>
          </el-form-item>
          <!-- 时间选择器 Date-->
          <el-form-item
            :key="index"
            v-if="item.addEditType == 'timePicker'"
            :label="item.label"
          >
            <div class="formItemDiv">
              <span v-if="item.required">*</span>
              <XDDatePicker
                type="date"
                v-model="ruleForm[item.prop]"
                :disabled="item.disabled || disabled"
              ></XDDatePicker>
            </div>
          </el-form-item>
          <!-- 时间选择器 datetime-->
          <el-form-item
            :key="index"
            v-if="item.addEditType == 'timePickerDateTime'"
            :label="item.label"
          >
            <div class="formItemDiv">
              <span v-if="item.required">*</span>
              <XDDatePicker
                type="datetime"
                v-model="ruleForm[item.prop]"
                :disabled="item.disabled || disabled"
              ></XDDatePicker>
            </div>
          </el-form-item>
          <!--   上传-->
          <el-form-item
            :key="index"
            v-if="item.addEditType == 'upload'"
            :label="item.label"
          >
            <div class="formItemDiv">
              <span v-if="item.required">*</span>
              <XDDownloader
                v-if="disabled"
                v-model="ruleForm[item.prop]"
              ></XDDownloader>
              <XDUpload
                v-else
                v-model="ruleForm[item.prop]"
                :disabled="item.disabled || disabled"
                :limit="item.limit"
                :mediaOnly="item.mediaOnly"
                :multiple="item.multiple"
              ></XDUpload>
            </div>
          </el-form-item>
          <!--  关联选择器-->
          <el-form-item
            :key="index"
            v-if="item.addEditType == 'linkDropDown'"
            :label="item.label"
          >
            <div class="formItemDiv">
              <span v-if="item.required">*</span>
              <XDLinkSelecter
                :list="item.list"
                :store="item.store"
                v-model="ruleForm[item.prop]"
                :disabled="item.disabled || disabled"
              ></XDLinkSelecter>
            </div>
          </el-form-item>
          <!--插槽-->
          <el-form-item
            :key="index"
            v-if="item.addEditType == 'slot'"
            :label="item.label"
          >
            <div class="formItemDiv">
              <span v-if="item.required">*</span>
              <slot
                @input="ruleForm[item.prop] = $event.target.value"
                :name="item.slotName"
                :data="item.value"
              ></slot>
            </div>
          </el-form-item>
        </template>
        <!--保存按钮-->
        <el-form-item label="" v-if="!this.disabled">
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: flex-end;
              padding-right: 50px;
            "
          >
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="submit">保 存</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-scrollbar>
  </el-dialog>
</template>
<script>
//import { OSSDelete, OSSupload } from "../../../tools/oss";
import { insertTableData, loadDropDown, updateTableData } from "./request";
export default {
  name: "EleFormComp",
  components: {},
  props: ["config", "title", "visibilityUpdate", "id", "disabled"],
  data() {
    return {
      //表格数据
      ruleForm: {},
      privateVisible: false,
    };
  },
  created() {},
  methods: {
    // 关闭窗口
    handleClose() {
      this.privateVisible = false;
    },
    // 生成form对象
    getForm() {
      this.config.table.map((item) => {
        if (item.prop && !item.addEditHidden == true) {
          this.ruleForm[item.prop] = item.value;
        }
      });
    },
    submit() {
      if (this.id < 0) {
        this.insertFunc();
      } else {
        this.updateFunc();
      }
    },
    //修改
    updateFunc() {
      var data = this.ruleForm;
      let requestJson = this.config.update;
      data.id = this.id;
      if (requestJson.mineId) {
        data.mineId = this.$store.state.mineId;
      }
      if (requestJson.companyId) {
        data.companyId = this.$store.state.companyId;
      }
      requestJson.data = data;
      if (this.requiredCheck() == true) {
        updateTableData(requestJson)
          .then((response) => {
            let res = response.msg;
            if (res == "success") {
              this.onSuccess("修改成功！");
              this.handleClose();
              this.reload();
            } else {
              this.onFailed(res);
            }
          })
          .catch((error) => {
            console.log(error);
            this.onFailed("修改失败！");
          });
      } else {
        this.onFailed(this.requiredCheck());
      }
    },
    //插入
    insertFunc() {
      var data = this.ruleForm;
      let requestJson = this.config.insert;
      if (requestJson.mineId) {
        data.mineId = this.$store.state.mineId;
      }
      if (requestJson.companyId) {
        data.companyId = this.$store.state.companyId;
      }
      if (requestJson.params) {
        Object.assign(data, data, requestJson.params);
      }
      requestJson.data = data;

      if (this.requiredCheck() == true) {
        insertTableData(requestJson)
          .then((response) => {
            let res = response.msg;
            if (res == "success") {
              this.onSuccess("新增成功！");
              this.handleClose();
              this.reload();
            } else {
              this.onFailed(res);
            }
          })
          .catch((error) => {
            console.log(error);
            this.onFailed("新增失败！");
          });
      } else {
        this.onFailed(this.requiredCheck());
      }
    },
    // 验证
    requiredCheck() {
      for (var i = 0; i < this.config.table.length; i++) {
        if (this.config.table[i].required) {
          console.log(this.ruleForm[this.config.table[i].prop]);
          if (this.ruleForm[this.config.table[i].prop] == "") {
            return "操作失败! " + this.config.table[i].label + "是必填项.";
          }
        }
      }
      return true;
    },
    //成功msg
    onSuccess(message) {
      this.$message({
        message: message || "成功",
        type: "success",
      });
    },
    //失败msg
    onFailed(message) {
      this.$message({
        message: message || "失败",
        type: "error",
      });
    },
  },
  watch: {
    visibilityUpdate: function () {
      this.privateVisible = true;
      this.getForm();
    },
  },
  inject: ["reload"],
};
</script>
<style lang="scss" scoped>
:deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
}
:deep(.el-select) {
  width: 100%;
}
.formItemDiv {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  padding-right: 50px;
  div {
    width: 100%;
  }
  .formData {
    width: 250px;
    display: flex;
  }
  span {
    margin-left: 10px;
    color: #de2900;
  }
  .formDev {
    width: 400px;
    display: flex;
  }
}
.formItemDiv > span {
  padding-top: 2px;
  padding-right: 2px;
  margin-left: -8px;
  color: #de2900;
}
.pub_dialog {
  display: flex;
  justify-content: center;
  align-items: Center;
  overflow: hidden;
  :deep(.el-dialog) {
    margin: 0 auto !important;
    height: 60%;
    overflow: hidden;
    .el-dialog__body {
      position: absolute;
      left: 0;
      top: 54px;
      bottom: 0;
      right: 0;
      padding: 0 50px;
      z-index: 1;
      overflow: hidden;
      overflow-y: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      &::-webkit-scrollbar-thumb {
        display: none;
      }
      &::-webkit-scrollbar-track {
        display: none;
      }
    }
  }
}
.footer {
  position: absolute;
  right: 30px;
  margin-bottom: 50px;
}
</style>
